<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Title</title>
  <!-- <link rel="stylesheet" href="stylesheets/reset.css"> -->
  <link rel="stylesheet" href="stylesheets/index.css">
</head>
<body>

<div id="app">
	<h1>{{ msg }}</h1>
	<div>
		<!-- <input type="text" v-bind:value="itemText"> -->
		<input type="text" v-model="itemText">
		<button v-on:click="addItem">Add</button>
	</div>
	<ul v-if="list.length > 0">
		<item-component
		  v-for="(item, index) of list"
		  v-bind:text="item + '-' + index"
		  v-bind:key="index"
		/>
		<!-- <li v-for="item of list" v-on:click="count++">{{ item }}, {{ count }}</li> -->
		<!-- <li v-for="item of list">{{ item }}</li> -->
	</ul>
	<div v-if="list.length === 0">暂无数据</div>
	
	<!-- 
	<counter v-bind:x="counterText"></counter>
	<counter x="seconds counter"></counter>
	<counter x="3- counter"></counter> -->
</div>

<script src="./vue.js"></script>
<script src="./index.js"></script>
</body>
</html>
